<template>
  <div style="background: #f5f5f5; height: 100vh">
    <div class="header">
      <div class="video_title">
        <van-icon name="arrow-left" class="icon" @click="goBack" />
        <p>我的成绩</p>
      </div>
      <div class="content_box1">
        <div class="content_box2">
          <div class="content_box3">
            <div class="content_box4">
              <span> {{ fraction }}<i>分</i> </span>
              <p>考试得分</p>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; color: #fff; margin-top: 8px">
        {{ subject }}
      </div>
      <div class="fout_conter">
        <img v-if="headPicture" :src="headPicture" alt="" />
        <img v-else src="@/assets/logo/logo.png" alt="" />
        <div>
          <span>{{ nickname }}</span>
          <p>{{ adminUserId }}</p>
        </div>
      </div>
    </div>
    <div class="stbox">
      <div class="stboxItem">
        <p>正确</p>
        <i style="color: #7ed321">{{ correct }}</i>
        <span>题</span>
      </div>
      <div class="stboxItem">
        <p>错误</p>
        <i style="color: #f33e34">{{ error }}</i>
        <span>题</span>
      </div>
      <div class="stboxItem">
        <p>未做</p>
        <i style="color: #999">{{ Unanswered }}</i>
        <span>题</span>
      </div>
    </div>
    <div class="footerButton">
      <div class="buttonBox">
        <van-button type="default" class="button" @click="awitError"
          >查看错题</van-button
        >
        <van-button type="info" class="button" @click="awitPass"
          >复卷</van-button
        >
      </div>
    </div>
    <van-dialog
      v-model="signshow"
      title="您已完成本科目培训所有内容，请签字确认"
      :showConfirmButton="false"
      :showCancelButton="false"
      v-loading="signloading"
      width="100vw"
    >
      <div style="width: 100%; display: flex; justify-content: center; margin-top: 21px;">
        <autograph ref="autograph"> </autograph>
      </div>
      <div style="width: 100%;height:64px;display: flex;justify-content: space-around;align-items: center;">
        <!-- <van-button type="default" size="small">清除</van-button>
        <van-button type="primary" size="small">提交签名</van-button> -->
        <div style="width: 40%;height:60% ;display: flex;align-items: center;justify-content: center;" @click="$refs.autograph.clear()">清除</div>
        <div style="width: 40%;height:60% ;display: flex;align-items: center;justify-content: center;color: #f33e34;" @click="commitEdit">提交签名</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import autograph from "@/components/autograph";
import { mapGetters } from "vuex";
import { getsubjectTitle,getcurrentInfo,getapplyid } from "@/utils/auth.js";
import { upFileqm } from "@/utils/upFiel";
import { updateApply } from "@/api/admin.js";
export default {
  computed: {
    ...mapGetters(["userinfor", "adminUserId", "nickname", "headPicture"]),
  },
  components:{autograph},
  data() {
    return {
      Unanswered: this.$route.query.Unanswered,
      correct: this.$route.query.correct,
      error: this.$route.query.error,
      fraction: this.$route.query.fraction,
      commitData: this.$route.query.commitData,
      subject: getsubjectTitle(),
      titleName: this.$route.query.titleName,
      usererror: this.$route.query.usererror,
      subjectid: this.$route.query.subjectid,
      signshow:false,
      nullSign:'',
      signloading:false,
    };
  },
  methods: {
    goBack() {
      if (!this.usererror) {
        this.$router.push("/practice?titleName=" + this.titleName);
      } else {
        this.$router.push("/home");
      }
    },
    awitPass() {
      this.$router.push(
        "/exam?daan=显示" +
          "&titleName=" +
          this.titleName +
          "&commitData=" +
          this.commitData +
          "&subjectid=" +
          this.subjectid
      );
    },
    awitError() {
      if (this.error == 0) {
        return this.$toast.fail("没有错题");
      }
      this.$router.push(
        "/exam?daan=显示" +
          "&titleName=" +
          this.titleName +
          "&commitData=" +
          this.commitData +
          "&error=error&subjectid=" +
          this.subjectid
      );
    },
    commitEdit(){
      if(this.nullSign==this.$refs.autograph.commit()){
        return this.$toast.fail('请签名后提交')
      }
      this.signloading=true
      upFileqm(this.$refs.autograph.commit(), this.titleName, {
        field: "signature",
      }).then(res=>{
        if (res.code == 200) {
          // res.data.url
          updateApply({
            applyid:getapplyid(),
            signature:res.data.url
          }).then((res) => {
            this.signloading=false
            if (res.code == 200) {
              this.signshow=false
              this.$toast.success('提交成功');
            } else {
              this.$toast.fail(res.msg);
            }
          });
        }else{
          this.signloading=false
        }
      })
    },
  },
  mounted(){
    this.signshow=false
    this.nullSign = ''
    if(!this.qyType('hailiwei')&&this.titleName=='正式考试'){
      if(JSON.parse(getcurrentInfo()).exam_type=='初培'){
        if(this.fraction>=80){
          this.signshow=true
          this.$nextTick(()=>{
            this.nullSign = this.$refs.autograph.commit()
          })
        }
      }else{
        if(this.fraction>=70){
          this.signshow=true
          this.$nextTick(()=>{
            this.nullSign = this.$refs.autograph.commit()
          })
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.video_title {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #fff;
  height: 2.75rem;

  p {
    margin: 0;
    width: calc(100vw - 64px);
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
  }
  .icon {
    font-size: 1.25rem;
  }
}
.header {
  height: 18.9rem;
  width: 100%;
  background: url("~@/assets/mobile/exam/cj.png") no-repeat;
  background-size: 100%;
  .content_box1 {
    display: flex;
    justify-content: center;
    height: 9.38rem;
    .content_box2 {
      width: 9.38rem;
      background: url("~@/assets/mobile/exam/hx.png") no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .content_box3 {
        width: 8rem;
        height: 8rem;
        background-color: rgba(255, 255, 255, 0.19);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .content_box4 {
          float: left;
          width: 7rem;
          height: 7rem;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.29);
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span {
            font-size: 1.875rem;
            i {
              font-size: 0.81rem;
            }
          }
          p {
            margin: 0;
            font-size: 0.81rem;
          }
        }
      }
    }
  }
  .fout_conter {
    margin-top: 1.09rem;
    height: 2.19rem;
    padding: 0 1.47rem;
    display: flex;
    img {
      margin-right: 8px;
      height: 100%;
    }
    div {
      color: #fff;
    }
  }
}
.stbox {
  margin: 0.75rem 0;
  height: 2.81rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .stboxItem {
    display: flex;
    font-size: 1rem;
    p {
      margin: 0;
      font-weight: 600;
      margin-right: 1.125rem;
    }
    span {
      color: #666;
    }
  }
}
.footerButton {
  height: calc(100vh - 2.81rem - 0.75rem - 0.75rem - 18.9rem);
  background-color: #fff;
  display: flex;
  align-items: flex-end;
  .buttonBox {
    padding: 0.75rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    .button {
      width: calc(50vw - 1.125rem);
      padding: 0;
    }
  }
}
</style>